<template>
  父组件
  <hr />
  <SlotA :names="names">
    <template v-slot="slotProps">
      <button>{{ slotProps.itemName }}</button>
      <button>{{ slotProps.itemName }}</button>
    </template>
  </SlotA>
  <hr />
  <template v-for="name in names" :key="name">
    <SlotB :name="name">
      <!-- 作用域插槽和具名插槽的一起使用 -->
      <template v-slot:top="slotProps">
        <button>{{ slotProps.itemName }}</button>
      </template>
      <template #="slotProps">
        <strong>{{ slotProps.itemName }}</strong>
      </template>
    </SlotB>
  </template>
  <hr />
  <!-- 独占默认插槽的使用 -->
  <SlotC :title="title" #="SlotProps">
    <ul>
      <li>{{ SlotProps.titleName }}</li>
    </ul>
  </SlotC>
</template>

<script>
import SlotA from './slotA-作用域插槽的基本使用.vue'
import SlotB from './slotB-作用域插槽和具名插槽的一起使用.vue'
import SlotC from './slotC-独占默认插槽的使用.vue'
export default {
  components: { SlotA, SlotB, SlotC },
  data() {
    return {
      names: ['zjd', 'hq'],
      title: '我是title',
    }
  },
}
</script>

<style scoped></style>
